<template>
  <a-modal :visible="open" :width="860" :title="formTitle" @cancel="onClose">
    <a-form-model ref="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }" :model="form" :rules="rules">
      <div class="orders-title">上传押车函</div>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="卸车压车费(元)" prop="num">
            <a-input-number v-model="form.num" style="width: 100%;" placeholder="请输入卸车压车费(元)" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }" label="补充说明" prop="illustrate">
            <a-textarea v-model="form.illustrate" placeholder="请输入补充说明" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item label="回执单" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }" prop="receipt">
            <base-upload v-model="form.receipt"></base-upload>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item label="押车函" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }" prop="letter">
            <base-upload v-model="form.letter"></base-upload>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <template slot="footer">
      <a-space>
        <a-button type="primary" :loading="submitLoading" @click="submitForm">
          保存
        </a-button>
        <a-button type="dashed" @click="cancel">
          取消
        </a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script>
import baseUpload from '@/components/imgUpload/index.vue'
import { detailsInsert, approvalFlow } from '@/api/demo'
export default {
  name: 'CreateForm',
  props: {
  },
  components: {
    baseUpload
  },
  data() {
    return {
      submitLoading: false,
      formTitle: '上传押车函',
      carTypeList: [], //车型字典
      carNumList: [], //车牌号字典
      id: null,
      vehicleId: null,
      processInstanceId: null,
      // 表单参数
      form: {
        id: null,
        num: undefined,
        receipt: undefined,
        illustrate: undefined,
        letter: undefined,
      },
      open: false,
      rules: {
        num: [
          { required: true, message: '卸车压车费不能为空', trigger: 'blur' }
        ],

        receipt: [
          { required: true, message: '回执单不能为空', trigger: 'blur' }
        ],
        letter: [
          { required: true, message: '押车函不能为空', trigger: 'blur' }
        ],
      },
    }
  },
  filters: {
  },
  created() {
  },
  computed: {
  },
  watch: {
  },
  mounted() {
  },
  methods: {
    onClose() {
      this.open = false
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        num: undefined,
        receipt: undefined,
        illustrate: undefined,
        letter: undefined,
      }
    },
    /** 接单按钮操作 */
    handleAdd(row) {
      this.id = row.id
      this.vehicleId = row.vehicleId
      this.processInstanceId = row.processInstanceId
      this.reset()
      this.open = true
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs.form.validate(valid => {
        if (valid) {
          // this.submitLoading = true
          const parms = {
            comments: `卸车压车费(元)：${this.form.num ?? ''}\n${this.form.illustrate ? '补充说明：' + this.form.illustrate : ''}`,
            infoId: this.vehicleId,
            imgLinks: this.form.receipt + ',' + this.form.letter,
            type: 1
          }
          detailsInsert(parms).then(response => {
            approvalFlow({ result: 'agree', processInstanceId: this.processInstanceId }).then(() => {
              this.$message.success(
                 '上传成功',
                3
              )
              this.submitLoading = false
              this.cancel()
              this.$emit('ok')
            }).catch((res) => {
              this.$message.error(
                '审批失败',
                3
              )
            })
          }).catch((res) => {
            this.$message.error(
              '评论失败',
              3
            )
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.orders-title {
  margin-bottom: 10px;
  font-size: 16px;
  color: black;
  font-weight: 600;
  padding-left: 10px;
  border-left: 3px solid #1890ff;
}
</style>
